<template>
  <div class="searchTable">
    <div class="cont">
      <el-table
        :data="tableData"
        :max-height="maxHeight"
        :border="false"
        :stripe="false"
        tooltip-effect="light"
        :header-cell-style="headerStyle"
        @selection-change="handleSelectionChange"
        style="border-radius: 4px"
      >
        <template v-for="(item, index) in columns">
          <el-table-column
            v-if="item.defined == false"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :align="item.align ? item.align : 'center'"
            :width="item.width"
          >
          </el-table-column>
          <el-table-column
            v-else
            :key="index"
            :label="item.label"
            :align="item.align ? item.align : 'center'"
            :width="item.width"
          >
            <template slot-scope="scope">
              <div class="blue-btn" @click="go(scope.row)">go</div>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>

    <el-pagination
      style="text-align: right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pager.pageNo"
      :page-size="pager.limit"
      :page-sizes="[]"
      layout="total, prev, pager, next, jumper"
      :total="pager.total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "searchTable",
  data() {
    return {
      columns: [
        {
          prop: "userId",
          label: "用户ID",
          align: "left",
          defined: false,
          width: 180,
        },
        {
          prop: "account",
          label: "用户账号",
          align: "center",
          defined: false,
          width: 180,
        },
        {
          prop: "name",
          label: "用户昵称",
          align: "center",
          defined: false,
          width: 180,
        },
        {
          prop: "num1",
          label: "碎片数",
          align: "center",
          defined: true,
          width: 180,
        },
        {
          prop: "num2",
          label: "连接数",
          align: "center",
          defined: true,
          width: 180,
        },
        {
          prop: "date",
          label: "注册时间",
          align: "center",
          defined: false,
          width: 180,
        },
        {
          prop: "loginDate",
          label: "最近登录时间",
          align: "center",
          defined: false,
          width: 180,
        },
        {
          prop: "status",
          label: "状态",
          align: "center",
          defined: true,
          width: 180,
        },
        {
          prop: "action",
          label: "操作",
          align: "center",
          defined: true,
          width: 180,
        },
      ],
      tableData: [
        {
          userId: "2016-05-02",
          account: "ajj",
          name: "煎熬骄傲",
          num1: "10000",
          num2: "9999999",
          date: "2020-09-10",
          loginDate: "2020-10-10",
          status: "正常使用",
          action: "封号",
        },
        {
          userId: "2016-05-02",
          account: "ajj",
          name: "煎熬骄傲",
          num1: "10000",
          num2: "9999999",
          date: "2020-09-10",
          loginDate: "2020-10-10",
          status: "正常使用",
          action: "封号",
        },
        {
          userId: "2016-05-02",
          account: "ajj",
          name: "煎熬骄傲",
          num1: "10000",
          num2: "9999999",
          date: "2020-09-10",
          loginDate: "2020-10-10",
          status: "正常使用",
          action: "封号",
        },
      ],
      pager: {
        pageNo: 1,
        limit: 2,
        total: 4,
      },
      maxHeight: 1800,
    };
  },
  methods: {
    headerStyle(obj) {
      return { background: "rgba(89, 126, 247, 0.1)", color: "#333" };
    },
    handleSelectionChange(val) {
      //   this.$emit("handleSelectionChange", val);
    },
    handleSizeChange(val) {
      //   this.$emit("handleSizeChange", val);
    },
    handleCurrentChange(val) {
      console.log("当前页", val);
      //   this.$emit("handleCurrentChange", val);
    },
    go(val) {
      console.log(val);
    },
  },
};
</script>
<style lang="scss" scoped>
.searchTable {
  .cont {
    padding: 20px;
    border-radius: 4px;
    background: #fff;
  }
  .blue-btn {
    color: #597ef7;
    cursor: pointer;
  }
  .red-btn {
    color: #f75959;
    cursor: pointer;
  }
}
</style>
